<template>
<div>
  <h1>
    Hello {{ form.username }}
  </h1>

  <h1>
    View all of your order here
  </h1>
<div id="data1" v-bind:class="data1">
  <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%"
    title="order information">
    <el-table-column
      prop="orderid"
      label="orderid"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="username"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="address"
      width="180">
    </el-table-column>
    <el-table-column
      prop="totalPrice"
      label="totalPrice"
      width="180">
    </el-table-column>
      <el-table-column
      prop="email"
      label="email"
      width="180">
    </el-table-column>
    <el-table-column
      prop="firstname"
      label="firstname"
      width="180">
    </el-table-column>
    <el-table-column
      prop="lastname"
      label="lastname"
      width="180">
    </el-table-column>
    <el-table-column
      prop="city"
      label="city"
      width="180">
    </el-table-column>
    <el-table-column
      prop="state"
      label="state"
      width="180">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="zip"
      width="180">
    </el-table-column>
    <el-table-column
      prop="country"
      label="country"
      width="180">
    </el-table-column>
  </el-table>
</div>

<el-button @click="showDetail" id="showDetail">showDetail</el-button>


</div>
</template>


<script>
import { ref , onMounted } from "vue";
import { reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import router from '../router';
import * as echarts from 'echarts';
import { useStore } from 'vuex';


  var allOrder = JSON.parse(sessionStorage.getItem("allOrder"));

  console.log("allOrder为"+allOrder);
  export default {
    data() {
      return {
        tableData: allOrder
      }
    },

    setup(){
        const store = useStore();
        const form = ref({})
        onMounted(() => {
            form.value = store.state.userInfo;
            console.log(store.state.userInfo);

        })

        const showDetail = function(){
          form.value = store.state.userInfo;
          console.log(store.state.userInfo);
        }

        return{
          store,
          form,
          showDetail
        }
    }
  }
</script>

<style lang="postcss" scoped>
    .wrapper{
        @apply h-full w-full
    }

    .header{
        @apply bg-indigo-200 flex items-center justify-between
    }
    ._menu, .__menu{
        cursor: pointer;
        width: 40px;
        height: 40px;
    }
    #icon1, #icon2{
        width: 40px;
        height: 40px;
    }


    .footer{
        @apply bg-indigo-200
    }

    .mid-wrapper{
        @apply h-full
    }

    .right-aside{
        @apply h-full bg-gray-100
    }

    .left-aside{
        @apply h-full bg-gray-100
    }

    ._admin{
        @apply flex ml-[900px]
    }

    .main{
        @apply h-full w-full
    }

    .sum{
        @apply ml-[650px]
    }

    .data1{
      cursor: pointer;
      width: 40px;
      height: 40px;
    }

    .data2{
      cursor: pointer;
      width: 40px;
      height: 40px;
    }


</style>



